<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
 <%
	pageContext.setAttribute("msg",request.getContextPath());
 %>
<!DOCTYPE html>
<html>
<head>
<base href="${msg}/" />
<meta charset="UTF-8">
<title>Insert title here</title>

<link href="bootstrap-3.3.5/css/bootstrap.min.css"  rel="stylesheet">
<link href="bootstrapvalidator/css/bootstrapValidator.css" rel="stylesheet"></link>

<script src="jquery/jquery-1.10.2.min.js"></script>

<script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="bootstrapvalidator/js/bootstrapValidator.js"></script>

<style>
	.clear{}
	.upbtn{}
	.sub{}
	.sub2{}
	.del{}
</style>

</head>
<body>
	
<div class="page-header">
<h1><small>浏览审批节点</small></h1>
</div>

<ol class="breadcrumb">
  <li><button type="button" class="btn btn-link clear" data-toggle="modal" data-target="#myModal">
添加节点
</button></li>
  <li>now Approval ：${flow.flowName}</li>
</ol>

<div class="container refresh">
    <div class="row">
        <div class="col-xs-12 ">
       <form action="" id="form2" name="form2" method="post">
	<table class="table">                                           
	
		<c:forEach items="${nodes}" var="node">
			<tr  class="info">
				<td>
				
				<div align="center">
							【节点ID】:${node.oid}&nbsp; &nbsp;          
							【节点名称:】${node.name }<br>
							<h2>
  								<span class="glyphicon glyphicon-circle-arrow-down"></span>
							</h2>
				</div>
					<div align="right">
					<button type="button" class="btn btn-info upbtn" data-toggle="modal" data-target="#myModal"  myvalue="${node.oid }">
							修改节点
					</button>
					<button type="button" class="btn btn-info del" myvalue="${node.oid }">删除节点</button>
					</div>
				</td>
			</tr>
			<tr><td><br></td></tr>
		</c:forEach>
		
		<tr>
			<td align="center">
				
				<h2>
  					<span class="glyphicon glyphicon-ok-sign"></span>
				</h2>
			</td>
		</tr>
		
	</table>
	</form>
</div></div></div>


<form action="node/save" method="post" name="form1">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
				         <div class="modal-content">
				          <div class="modal-header">
				            <button data-dismiss="modal" class="close" type="button">×<span class="sr-only">Close</span></button>
				            <h4 class="modal-title">save Or Update</h4>
				          </div>
				          <div class="modal-body">
				            
						<table class="table table-bordered">
								 <tr>
									<td>节点名称：</td>
				            		<td><input type="hidden" name="oid" id="oid" /><input type="hidden" value="${flow.oid}" name="parentid"  /><input type="hidden" value="${flow.flowName }" name="approvalName" /><input type="text" class="form-control"  name="name" /></td>
								 </tr>
								 <tr>
								 	<td>指定上级节点：</td>
								 	<td>
									 	<select name="prenodeid">
									 				<option value="0">设为头节点</option>
										 		<c:forEach items="${nodes }" var="n">
										 			<option value="${n.oid}">${n.name}</option>
										 		</c:forEach>
									 	</select>
								 	</td>
								 </tr>
								 <tr>
				            		<td>审批方式：</td>
				            		<td>
				            			<select name="isByDept" id="isByDept">
				            				<option value="0">按部门归属审批</option>
				            				<option value="1">按相关部门审批</option>
				            			</select>
				            			
				            			<div style="display:none;" id="reason" >
				            				<select name="deptid" id="depts">
				            					<c:forEach items="${depts}" var="dept">
				            						<option value="${dept.oid }">${dept.deptName }</option>
				            					</c:forEach>
				            				</select>
				            					
				            				<select name="jobid">
				            				</select>
				            			</div>
				            			
				            		</td>
								 </tr>
						</table>
				          </div>
          <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
            <button class="btn btn-primary sub sub2" type="submit">提交</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
</div>
 
<div style="height:200px"></div>
</form>
	
</body>
</html>
<script>
	$(function(){

		$("#isByDept").change(function(){
			
			if($(this).val()==1){
				$("#reason").show();
				
			}else{
				$("#reason").hide();
			}
			
		});
		
		$("#depts").change(function(){
		
			var id = $(this).val();
			
			
			$.ajax({
				
				url:"node/deptJobs",
				type:"POST",
				data:{
					oid:id   
				},
			
				success:function(data){
		
					
					$("select[name=jobid]").empty();
					
					$(data).each(function(i){
						
					    $("select[name=jobid]").append('<option value="'+data[i].oid+'">'+data[i].name+'</option>');
		
					});
					
				}
					    
			});
		

		});
		
		$(".upbtn").click(function(){

			var id = $(this).attr("myvalue");
			
			$.ajax({
				
				url:"node/editTo",
				type:"POST",
				data:{
					oid:id   
				},
			
				success:function(data){
					
					   $("select[name=prenodeid]").children("option").each(function () {
				        	
			            if ($(this).val() ==data.prenodeid) {
			                $("select[name=prenodeid]").find('option:eq('+this.index+')').attr('selected', true);
			            }
			        });
				
						$("input[name='name']").val(data.name);
						$("#oid").val(data.oid);
				}
					    
			});
			
			
				$(".sub").click(function(){
					
						upSub();
	
					return false;
				});
						
		});
		
		$(".clear").click(function(){
			
				$("select[name=prenodeid]").find('option:eq(0)').attr('selected', true);
				$("input[name='name']").val(this.defaultValue);	
				$("input[name='name']").val(this.defaultValue);	
				$("#oid").val(this.defaultValue);
			
			$(".sub2").click(function(){
				
				return true;
			});
			
		});
		
		
		$(".del").click(function(){
			
			var id = $(this).attr("myvalue");
			
				removeSub(id);
			
		});
		
	});
	
	function upSub(){

		document.forms['form1'].action="node/edit";//修改表单的提交值
		
		document.forms['form1'].submit();
		
	}
	
	function removeSub(id){
		
		window.location.href="node/removeNode?oid="+id;    
		
		
	}
</script>